<template>
  <div class="m_right">
    <p></p>
    <div class="mem_tit">用户信息中心</div>
   
    <div>
      <!-- 搜索区域 -->
      <div style="margin: 15px; display: flex; justify-content: flex-start; align-items: center; gap: 10px;">
        <el-input
          v-model="searchParams.loginName"
          placeholder="请输入登录名"
          clearable
          style="width: 200px;"
        />
       <el-input
           v-model="searchParams.createTime"
           type="date"
           placeholder="请选择创建时间"    style="width: 200px;"
           value-format="yyyy-MM-dd"
       />
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>

      <!-- 用户列表表格 -->
      <el-table
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        :data="userList"
        style="width: 100%"
        border
        :fit="true"
      >
        <el-table-column label="登录名" header-align="center" align="center" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.loginName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名" header-align="center" align="center" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" header-align="center" align="center" width="70">
          <template slot-scope="scope">
            <span>{{ scope.row.sex === 1 ? '男' : '女' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="身份证号" header-align="center" align="center" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.identityCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" header-align="center" align="center" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" header-align="center" align="center" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" header-align="center" align="center" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.type === 1 ? '管理员' : '普通用户' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center" width="160">
          <template slot-scope="scope">
            <el-button type="info" size="mini" @click.native="enterModifyView(scope.row.id)">修改</el-button>
            <el-button type="danger" size="mini" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div  v-if="pageInfo.total > 0" class="page">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          @current-change="handleCurrentChange"
          :page-size="pageInfo.pageSize"
          :current-page="pageNum"
          layout="prev, pager, next, jumper"
          :total="pageInfo.total"
        >
        </el-pagination>
      </div>

        <!-- 修改用户对话框 -->
<el-dialog title="修改用户信息" :visible.sync="modifyUserShow" width="500px">
  <el-form :model="modifyForm" label-width="80px" ref="modifyForm">
    <el-form-item label="登录名">
      <el-input v-model="modifyForm.loginName" disabled></el-input>
    </el-form-item>
    <el-form-item label="用户名" prop="userName">
      <el-input v-model="modifyForm.userName"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="modifyForm.sex">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="0">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="身份证号" prop="identityCode">
      <el-input v-model="modifyForm.identityCode"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="modifyForm.email"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="modifyForm.mobile"></el-input>
    </el-form-item>
    <el-form-item label="类型" prop="type">
       <el-radio-group v-model="modifyForm.type">
        <el-radio :label="1">管理员</el-radio>
        <el-radio :label="0">普通用户</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="modifyUserShow = false">取 消</el-button>
    <el-button type="primary" @click="modifyUser">确 定</el-button>
  </span>
</el-dialog>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {Pagination, Table, TableColumn, Loading, Dialog, Form, FormItem, Input, RadioGroup, RadioButton} from "element-ui";
Vue.use(Pagination);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Dialog);
Vue.use(Form);
Vue.use(Input);
Vue.use(FormItem);
Vue.use(Loading.directive);
Vue.use(RadioGroup);
Vue.use(RadioButton);

export default {
  data() {
    return {
      pageInfo: {},
      userList: [],
      pageNum: 1,
      pageSize: 10,
      loading: false,
      modifyUserShow: false,
      modifyForm: {},
      formLabelWidth: "20%",
      rules: {
        loginName: [
          { required: true, message: '请输入登录名', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        identityCode: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
           { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号格式', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
           { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: '请选择用户类型', trigger: 'change' }
        ]
      },
      // 搜索参数
      searchParams: {
        loginName: '',
        createTime: ''
      }
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getUserList(this.pageNum, this.pageSize);
    },
    
    getUserList(pageNum, pageSize) {
      this.loading = true;
      Vue.prototype.$axios({
        url: "/api/user/pageinfo",
        method: "POST",
        data: {
          pageNum: pageNum,
          pageSize: pageSize,
          ...this.searchParams
        }
      })
      .then((rs) => {
        this.userList = rs.data.pageinfo.list;
        this.pageInfo = rs.data.pageinfo;
        this.pageNum = this.pageInfo.pageNum;
      })
      .finally(() => {
        this.loading = false;
      });
    },
    
    enterModifyView(id) {
      this.modifyUserShow = true;
      // 查找要修改的用户
      let user = null;
      this.userList.forEach(i => {
        if(i.id == id) user = i;
      });
      this.modifyForm = JSON.parse(JSON.stringify(user));
       this.modifyForm.type = Number(this.modifyForm.type) || 0;  
    },
    
    modifyUser() {
  this.$refs['modifyForm'].validate(valid => {
    if (valid) {
      this.$axios({
        url: '/api/user/updateuser',
        method: 'post',
        data: this.modifyForm
      }).then(rs => {
        if(rs.data.code == 5200) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          sessionStorage.setItem("loginName", rs.data.loginName);
          sessionStorage.setItem("type", rs.data.type);
          this.modifyUserShow = false;
          this.getUserList(this.pageNum, this.pageSize);
        } else {
          this.$message({
            type: 'danger',
            message: '修改失败!'
          });
        }
      });
    } else {
      this.$message({
        type: 'error',
        message: '请填写完整信息!'
      });
    }
  });
},
    
    deleteUser(id) {
      this.$messageBox.confirm('此操作会将该用户移入回收箱, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: '/api/user/delete',
          method: 'post',
          data: {id: id}
        }).then(rs => {
          if(rs.data.code == 5200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getUserList(this.pageNum, this.pageSize);
          } else {
            this.$message({
              type: 'danger',
              message: '删除失败!'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 查询方法
    handleSearch() {
      this.pageNum = 1;
      this.getUserList(this.pageNum, this.pageSize);
    },

    // 重置搜索
    resetSearch() {
      this.searchParams.loginName = '';
      this.searchParams.createTime = '';
      this.handleSearch();
    }
  },
  created() {
    let type = sessionStorage.getItem("type");
    if(!type || type == 0) {
      this.$message.error("权限不足，将回到首页！")
      this.$router.push({
        name: 'IndexCenter'
      })
      return;
    }
    this.getUserList(this.pageNum, this.pageSize);
  },
  activated() {
    if (!this.userList.length) {
      this.getUserList(this.pageNum, this.pageSize);
    }
  }
};
</script>

<style scoped>
.m_right {
  display: flex;
  height: 100vh;
}

.left-menu {
  width: 200px;
  background-color: #f5f7fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.menu-item {
  margin-bottom: 20px;
}

.menu-title {
  padding: 10px 20px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #ddd;
}

.menu-subitem {
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-subitem:hover {
  background-color: #eef2f7;
}

.menu-subitem.active {
  background-color: #fff;
  border-left: 3px solid #409eff;
}

.right-content {
  flex: 1;
  padding: 5px;
  overflow-y: auto;
  background-color: #f5f7fa;
}

.content-header {
  margin-bottom: 20px;
}

.content-header h3 {
  margin: 0;
  color: #333;
}

.el-table {
  max-width: 100%;
  width: 100% !important;
  table-layout: auto;
}

.page {
  text-align: center;
  margin-top: 20px;
}

/* 优化表格行高和间距 */
.el-table .el-table__body td,
.el-table .el-table__header th {
  padding: 8px 0;
}

/* 优化按钮样式 */
.el-table .el-button--mini {
  padding: 5px 10px;
  font-size: 12px;
  margin: 0 4px;
  width: 48px;
}

/* 表头样式 */
.el-table th {
  background-color: #f5f7fa;
  color: #666;
  font-weight: normal;
  border-bottom: 1px solid #ebeef5;
}

/* 悬停效果 */
.el-table tbody tr:hover > td {
  background-color: #ecf5ff !important;
}

/* 分页样式 */
.page .el-pagination {
  margin-top: 15px;
  text-align: center;
}

/* 优化搜索区域整体样式 */
.search-container {
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 调整按钮间距 */
.el-button {
  margin-left: 8px;
}

/* 表格顶部留白 */
.el-table {
  margin-top: 1rem;
}


/* 增加行高，提升可读性 */
.el-table .el-table__body td,
.el-table .el-table__header th {
  padding: 10px 12px;
}

</style>
